<template>
  <div style="display: flex;justify-content: center">
    <h1>采购信息查询</h1>
  </div>
  <div>
    <el-table :data="cutBean.records" style="width: 100%">
      <el-table-column prop="name" label="供应商名称"/>
      <el-table-column prop="job" label="采购员"/>
      <el-table-column prop="birthday" label="采购时间"/>
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button type="danger" @click="dialogVisible=true,show(scope.row)">查看采购详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:currentPage="cutBean.current"
        v-model:page-size="cutBean.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutBean.total"
        @current-change="findByItem"
    />
  </div>

  <!--    条件查询-->
  <div>
    <div style="display: flex;justify-content: space-around;margin-top: 20px">
      <div>供应商<el-input/></div>
      <div>起始日期<el-input/></div>
      <div>结束日期<el-input/></div>
      <div><el-button type="primary" @click="" style="margin-top: 16px">查询</el-button></div>

    </div>

    <!--查看详情弹出框-->
    <el-dialog
        v-model="dialogVisible"
        title="采购信息详情"
        width="50%"
    >
      <el-form
          ref="userForm"
          :model="userObj"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
          style="width: 600px;"
      >
        <el-form-item label="供应商名称：" prop="">

        </el-form-item>
        <el-form-item label="采购员：" prop="">

        </el-form-item>
        <el-form-item label="采购时间：" prop="">

        </el-form-item>
        <el-form-item label="采购物品明细：" prop="">

        </el-form-item>
        <el-table :data="tableData" style="width: 80%">
          <el-table-column prop="name" label="商品名称" width="100" />
          <el-table-column prop="type" label="品牌" width="100" />
          <el-table-column prop="price" label="采购价" width="100" />
          <el-table-column prop="num" label="采购数量" width="100" />
        </el-table>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
name: "buyCar",
data(){
    return{
      supplierObj: {},
      cutBean: {
        records: [
          {id: 2, name: "haha", job: "老板", birthday: "1993-02-01",price:"20555"},
          {id: 3, name: "oo", job: "boss", birthday: "1996-02-01"},
          {id: 1, name: "dd", job: "boss2", birthday: "1995-02-01"},
          {id: 4, name: "cc", job: "boss3", birthday: "1994-02-01"},
        ],
        total: 20,
        pages: 5,
        size: 4,
        current: 1
      },
      dialogVisible: false,
      infoVisible:false,
      tableData:[
        {name:"战神笔记本",type:"战神",price:"13522",num:"100"},
        {name:"神州笔记本",type:"神州",price:"8000",num:"200"},
        {name:"惠普笔记本",type:"惠普",price:"12000",num:"150"},
      ]
        }
    }
}
</script>

<style scoped>

</style>